<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="工单管理"
      :request="getList"
      :columns="columns"
      :search="searchObj"
      @selectionChange="handleSelectionChange"
    >
      <template #toolbar>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleShowAddEdit()"
        >
          提交工单
        </el-button>
        <el-button
          :disabled="selectedArr.length <= 0"
          icon="el-icon-delete"
          @click="handleDelete"
        >
          批量删除
        </el-button>
      </template>

      <template #expand="{ row }">
        <div
          v-for="item in row.contents || []"
          :key="item.id"
          class="content-list"
        >
          <div class="title">
            <i class="dot"></i>
            <span class="name">李涵</span>
            {{ item.createTime | parseTime }}
          </div>
          <div class="content">{{ item.content }}</div>
          <div
            v-for="(img, index) in item.images || []"
            :key="index"
            class="images"
          >
            <img :src="img" alt="" />
            <div class="preview" @click="handlePreview(img)">
              <i class="el-icon-view" />
            </div>
          </div>
        </div>
      </template>

      <template #date="{ row }">
        {{ row.createTime | parseTime }}
      </template>
      <template #updateTime="{ row }">
        {{ row.updateTime | parseTime }}
      </template>

      <template #operate="{ row }">
        <el-tooltip content="关闭" placement="top">
          <i
            class="el-icon-circle-close operate-button"
            @click="handleClose(row)"
          ></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="删除" placement="top">
          <i
            class="el-icon-delete operate-button"
            @click="handleDelete([row])"
          ></i>
        </el-tooltip>
      </template>
    </pro-table>

    <!-- 创建/编辑页面 -->
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :visible.sync="showAddEdit"
      direction="rtl"
      size="450px"
      @closed="isAddEdit = false"
    >
      <add-edit
        v-if="isAddEdit"
        :user="selectedRow"
        @close="showAddEdit = false"
      />
    </el-drawer>
    <!-- 预览图片 -->
    <el-dialog :visible.sync="isShowImg" width="60%">
      <img :src="img" alt="" style="max-width: 100%" />
    </el-dialog>
  </div>
</template>
<script>
import AddEdit from './components/AddEdit'
export default {
  name: 'Feedback',
  components: { AddEdit },
  data() {
    return {
      isShowImg: false,
      img: '',
      showImport: false,
      showPageModal: false,
      selectedRow: {},
      isAddEdit: false,
      showAddEdit: false,
      selectedArr: [],
      columns: [
        { type: 'expand', tdSlot: 'expand' },
        { type: 'selection' },
        {
          label: '工单标题',
          prop: 'title',
        },
        {
          label: '问题类型',
          prop: 'type',
        },
        {
          label: '紧急程度',
          prop: 'priority',
        },
        {
          label: '所属范围',
          prop: 'product',
        },
        {
          label: '状态',
          prop: 'status',
        },

        {
          label: '提交时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },
        {
          label: '更新时间',
          tdSlot: 'updateTime',
          align: 'center',
          width: 160,
        },

        {
          label: '操作',
          tdSlot: 'operate',
          width: 120,
          align: 'center',
          fixed: 'right',
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'text',
            label: '',
            name: 'keyword',
            placeholder: '标题',
          },
        ],
      },
    }
  },

  methods: {
    async getList(params) {
      const { code, data } = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 200,
            data: {
              list: [
                {
                  id: '227476672180388021',
                  enterpriseId: '141598637888113837',
                  userId: '141598637888113838',
                  product: 'PASSPORT',
                  type: 'FAILURE',
                  priority: 'HIGHEST',
                  status: 'OPEN',
                  title: 'abc',
                  contents: [
                    {
                      id: '227476672180388022',
                      feedbackId: '227476672180388021',
                      userType: 'ENTERPRISE',
                      userId: '141598637888113838',
                      content: 'aaaaaaaa',
                      secretContent: 'bbbbbbbbbbb',
                      images: [
                        'https://fontdo-rcs.oss-cn-shenzhen.aliyuncs.com/images/c9c6abd842ec46bbb055e9a604077dcd.png',
                      ],
                      createTime: '2022-03-23T05:41:58.000+00:00',
                    },
                    {
                      id: '227476672180388023',
                      feedbackId: '227476672180388021',
                      userType: 'ENTERPRISE',
                      userId: '141598637888113838',
                      content: 'dsfasd',
                      secretContent: 'asdfasf',
                      images: null,
                      createTime: '2022-03-23T05:47:14.000+00:00',
                    },
                  ],
                  createTime: '2022-03-23T05:41:58.000+00:00',
                  updateTime: '2022-03-23T05:47:14.000+00:00',
                },
              ],
              total: 100,
            },
          })
        }, 500)
      })
      if (+code === 200) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
    handleSelectionChange(arr) {
      this.selectedArr = arr
    },
    async handleDelete() {
      this.$confirm(
        '选定的条目及条目相关的数据将被删除且不可恢复，您是否确定删除？',
        '删除',
        {
          iconClass: 'el-icon-warning-outline warning',
          center: true,
          closeOnClickModal: false,
        }
      )
    },
    handleClose(row) {
      this.$confirm('确定关闭该工单吗？', '关闭', {
        iconClass: 'el-icon-warning-outline warning',
        center: true,
        closeOnClickModal: false,
      })
    },

    handleShowAddEdit(item) {
      this.selectedRow = item || {}
      this.isAddEdit = true
      this.showAddEdit = true
    },
    handleShowImport() {
      this.showImport = true
    },
    handlePreview(img) {
      this.img = img
      this.isShowImg = true
    },
  },
}
</script>
<style lang="scss" scoped>
.content-list {
  margin-bottom: 12px;
  .dot {
    width: 6px;
    height: 6px;
    display: inline-block;
    background: $warning;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
  }
  .name {
    margin-right: 8px;
  }
  .content {
    margin: 8px 0 8px 12px;
  }
  .images {
    width: 104px;
    height: 104px;
    margin: 0 8px 8px 12px;
    padding: 8px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    text-align: center;
    img {
      max-width: 100%;
      max-height: 100%;
    }
    .preview {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
      display: none;
      .el-icon-view {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
    &:hover {
      .preview {
        display: block;
      }
    }
  }
}
</style>
